<template>

    <div class="content">
      <!--加载中-->
      <Spin size="large" fix v-if="spinShow"></Spin>
      <!--导航-->
        <div class="banner">
  <div class="banner_center">
      本次测试共 {{topicNum}}题，满分{{branch}}分，{{qualified}}分合格，答题时间：{{examTime}}
    <Button class="banner_btn" type="primary" shape="circle" :loading="loading" @click="toLoading">
      <span v-if="!loading">提交试卷</span>
      <span v-else>提交中...</span>
    </Button>
    <Modal
      v-model="modal1"
      title="提交试卷"
      @on-ok="ok"
      @on-cancel="cancel">
      <div style="text-align: center">提交试卷后结束答题</div>
      <div style="text-align: center">事实显示本次成绩</div>
      <div style="text-align: center">是否确认交卷?</div>
    </Modal>
  </div>
</div>
      <!--答题-->
      <div class="answer">
        <!--做题板块-->
        <div class="answer_three">
            <div class="answer_three_header">
                已答 <span class="zi_lan">{{switchNum}}</span> 题 / 共 <span>{{topicNum}} </span>题
              <div class="time">剩余时间:     {{minute}}</div>
            </div>
            <div class="answer_three_tips">
           <div v-if="Diagnosis==1"> <span class="zi_lan">单选题</span> &nbsp;(共{{dan}}道题，每题{{danfen}}分，每题有且仅有一个正确答案)   </div>
              <div v-if="Diagnosis==2"> <span class="zi_lan">多选题</span> &nbsp;(共{{duo}}道题，每题{{duofen}}分，每题有多个正确答案) </div>
                <div v-if="Diagnosis==3"> <span  class="zi_lan">判断题</span> &nbsp;(共{{pan}}道题，每题{{panfen}}分，每题有且仅有一个正确答案) </div>
            </div>
          <div class="subject">
           {{title}}、{{content}}
          </div>
          <ul>
            <li v-on:click="choice(index)" v-for="(item,index) in items"><div :class="item.state==1?'li_lan':(item.state==2?'li_red':(item.state==3?'li_red':''))"></div>{{item.one}}</li>

          </ul>
          <!--标记-->
          <div class="sign" v-bind:class="hoverBiao==true?'':'hoverBiao'" v-on:click="sign()">
            {{signBtn}}
          </div>
          <!--下一题-->
          <div class="upDown">
            <div class="up" v-on:click="up()">上一题</div>
            <div class="down" v-on:click="down()">下一题</div>
          </div>
        </div>
        <!--图例板块-->
          <div class="answer_one">
            <div>
              图例
            </div>
            <div class="answer_one_div">
              <div class="answer_one_div_k">
              <div>
              </div>
              未做
            </div>
              <div class="answer_one_div_k">
                <div>
                </div>
                已做
              </div>
              <div class="answer_one_div_k">
                <div>
                </div>
                标记
              </div>
              <div class="answer_one_div_k">
                <div>
                </div>
                当前
              </div>
            </div>
          </div>
        <!--选项卡板块-->
        <div class="answer_two">
          单选题
          <div class="radio">
            <!--<div class="not yes">12</div>-->
            <!--<div class="not biao lan">1</div>-->
            <!--<div class="not">1</div>-->
            <!--<div class="not biao">1</div>-->
            <!--<div class="not">1</div>-->
            <!--<div class="not lan">1</div>-->
            <div v-on:click="cardClick(subRadio,index,index+1)" :class="subRadio.cardStyle" v-for="(subRadio, index) in subRadio">{{index+1}}</div>
          </div>
          多选题
          <div class="check">
            <div v-on:click="cardClick(subCheck,index,subRadio.length+(index+1))" :class="subCheck.cardStyle" v-for="(subCheck, index) in subCheck">{{subRadio.length+(index+1)}}</div>
          </div>
          判断题
          <div class="judge">
            <div v-on:click="cardClick(subJudge,index,(subRadio.length+subCheck.length)+(index+1))" :class="subJudge.cardStyle" v-for="(subJudge, index) in subJudge">{{(subRadio.length+subCheck.length)+(index+1)}}</div>
          </div>
        </div>

      </div>


    </div>
</template>

<script>
    export default {

        data() {
            return {
              extractQuestion:'',//专题考试抽题
              current:2,
              loading: false,//提交试卷
              spinShow: false,//加载中

              topicNum:'',//总共多少道题
              branch:'',//总分
              qualified:'',//合格分数
              examTime:'',//考试时间
              dan:'',
              duo:'',
              pan:'',
              danfen:'',
              duofen:'',
              panfen:'',
              countDown:null,//倒计时
              minute:'',//分秒
              moment:'',//开始的时间
              chuTime:'',//初始时间

              switchNum:0,//实时监听已答题数

              subRadio:[],//单选题
              subCheck:[],//多选
              subJudge:[],//判断



              content:'',//题目内容
              items:[
//                {
//                  one:'A、先进性建设',
//                  state:0
//                },
              ],//题目选项
              Diagnosis:1,//1单选题2多选题 3选判断
              title:1,//题号

              signBtn:'标记',
              hoverBiao:true,

              modal1: false,//弹窗
              templateId:'',//模板id
                  }
        },
      methods: {
        ok () {
          this.$Message.info('交卷成功');
          this.Submission();
        },
        Submission(){  //提交试卷
          console.log(this.subRadio);//单选
          console.log(this.subCheck);//多选
          console.log(this.subJudge);//判断
          var questionAnswers=[];//定义答案汇总
          console.log(this.subRadio.length);
          //循环取出单选题答案
          for(var i=0;i<this.subRadio.length;i++){
            var daan ="";//单选题的答案

            //循环添加到答案总数组中
            questionAnswers.push({
              questionId:this.subRadio[i].id,
              questionType:this.subRadio[i].type,
              userAnswers:daan,//用户答案
              isMark:mark,
            })
          }
//发送数据
          console.log("考试答案"+questionAnswers)
          var examId= this.$route.query.examId//专题id
         var id=this.$cookies.get('pcexam_id');
          var time=this.chuTime-this.countDown
          this.$axios({
            url: 'web/subject/exam/submit',
            method: 'POST',
            data:{
              templateId:this.templateId,//模板id
              subjectId:examId, //专题id
              examTime:time,//考试用时秒
              beginTime:this.moment,//考试开始时间
              userId:id,//用户id
              questionAnswers:questionAnswers//题的数组
            },
            headers: {
              'Content-Type': 'application/json;charset=UTF-8'
            },
            transformRequest: [function(data) {  //json
              data = JSON.stringify(data);
              return data
            }],
          }).then((response) => {
           console.log(response.data);
            var a=this.$route.query.examId;
            var b=this.$route.query.examname
            this.$router.push({  //核心语句
              path:'/wholeMock/resultExam',   //跳转的路径
              query:{           //路由传参时push和query搭配使用 ，作用时传递参数
                examDetailId:response.data.examDetailId ,
                examId:a ,
                examname:b ,
              }
            })
          }).catch((error) => {
//            console.log("调取失败500");
            this.$Message.error('提交失败！')
          });
        },
        cancel () {
//          console.log("关闭")
          this.loading=false//弹窗
        },
        up:function () {//上一题
          this.switchNum1(); //实时监听已达多少题
//              console.log(this.title-1)
          if((this.title-1)<this.subRadio.length){//单选
             var iidx=this.title-2;
             if (iidx<0){
               this.$Message.warning('已经是第一页了');
             }else{ //渲染
//              console.log("去单选的第"+iidx);
               if (this.subRadio[this.title-1].cardStyle.indexOf("lan") != -1 ){//删除上一个颜色
                 var a=this.subRadio[this.title-1].cardStyle.split('lan');
                 this.subRadio[this.title-1].cardStyle=a;
               }
               var acc=this.subRadio[iidx].cardStyle;//当前位置的蓝色
               this.subRadio[iidx].cardStyle=acc+' lan'
               //重新赋值
               this.content=this.subRadio[iidx].content;//渲染题目
               this.title=this.title-1;//渲染题号
//               var strArr = this.subRadio[iidx].option.split("&&");
//               console.log(strArr);
               this.items=[];
//               for (var i=0;i<strArr.length;i++) {
//                 this.items.push({
//                   one: strArr[i],
//                   state: 0
//                 })
//               }
               if(this.subRadio[this.title-1].optionA==''||this.subRadio[this.title-1].optionA==null){}else{this.items.push({one:this.subRadio[this.title-1].optionA, state:0})}
               if(this.subRadio[this.title-1].optionB==''||this.subRadio[this.title-1].optionB==null){}else{this.items.push({one:this.subRadio[this.title-1].optionB, state:0})}
               if(this.subRadio[this.title-1].optionC==''||this.subRadio[this.title-1].optionC==null){}else{this.items.push({one:this.subRadio[this.title-1].optionC, state:0})}
               if(this.subRadio[this.title-1].optionD==''||this.subRadio[this.title-1].optionD==null){}else{this.items.push({one:this.subRadio[this.title-1].optionD, state:0})}
               if(this.subRadio[this.title-1].optionE==''||this.subRadio[this.title-1].optionE==null){}else{this.items.push({one:this.subRadio[this.title-1].optionE, state:0})}
              //查看是否标记了
               if(this.subRadio[this.title-1].stBiao==true){
//                 console.log("true")
                 this.signBtn='取消标记';
                 this.hoverBiao=false
               }else {
//                 console.log("false")
                 this.signBtn='标记';
                 this.hoverBiao=true
               }
         //      答题卡信息回显----预防出问题
               var arr=''+this.subRadio[iidx].answer
               var strs = arr.split(""); //字符分割
//               console.log(strs);
               for(var n=0;n<strs.length;n++){
                 var nn=strs[n]
                 this.items[nn].state=1;
               }

             }
          }else if((this.title-1)<(this.subRadio.length+this.subCheck.length)){//多选
            var iidx=this.title-2;
            if (iidx<this.subRadio.length){
//              console.log("去单选的"+(this.subRadio.length-1))
              this.Diagnosis=1;//单选题赋值
              var j=this.subRadio.length-1;
              if (this.subCheck[0].cardStyle.indexOf("lan") != -1 ){//删除上一个颜色
                var a=this.subCheck[0].cardStyle.split('lan');
                this.subCheck[0].cardStyle=a;
              }
              var acc=this.subRadio[j].cardStyle;//当前位置的蓝色
              this.subRadio[j].cardStyle=acc+' lan'
              //重新赋值
              this.content=this.subRadio[j].content;//渲染题目
              this.title=this.title-1;//渲染题号
//              var strArr = this.subRadio[j].option.split("&&");
//              console.log(strArr);
              this.items=[];
              if(this.subRadio[this.subRadio.length-1].optionA==''||this.subRadio[this.subRadio.length-1].optionA==null){}else{this.items.push({one:this.subRadio[this.subRadio.length-1].optionA, state:0})}
              if(this.subRadio[this.subRadio.length-1].optionB==''||this.subRadio[this.subRadio.length-1].optionB==null){}else{this.items.push({one:this.subRadio[this.subRadio.length-1].optionB, state:0})}
              if(this.subRadio[this.subRadio.length-1].optionC==''||this.subRadio[this.subRadio.length-1].optionC==null){}else{this.items.push({one:this.subRadio[this.subRadio.length-1].optionC, state:0})}
              if(this.subRadio[this.subRadio.length-1].optionD==''||this.subRadio[this.subRadio.length-1].optionD==null){}else{this.items.push({one:this.subRadio[this.subRadio.length-1].optionD, state:0})}
              if(this.subRadio[this.subRadio.length-1].optionE==''||this.subRadio[this.subRadio.length-1].optionE==null){}else{this.items.push({one:this.subRadio[this.subRadio.length-1].optionE, state:0})}
            //查看是否标记了
              if(this.subRadio[this.subRadio.length-1].stBiao==true){
//                console.log("true")
                this.signBtn='取消标记';
                this.hoverBiao=false
              }else {
//                console.log("false")
                this.signBtn='标记';
                this.hoverBiao=true
              }
//              for (var i=0;i<strArr.length;i++) {
//                this.items.push({
//                  one: strArr[i],
//                  state: 0
//                })
//              }
              //答题卡信息回显----预防出问题(上一个多选去单选)
              var arr=''+this.subRadio[j].answer
              var strs = arr.split(""); //字符分割
//              console.log(strs);
              for(var n=0;n<strs.length;n++){
                var nn=strs[n]
                this.items[nn].state=1;
              }
            }else{ //渲染
//              console.log("去多选的第"+(iidx-this.subRadio.length))
              var j=(this.title-1)-this.subRadio.length;
              if (this.subCheck[j].cardStyle.indexOf("lan") != -1 ){//删除上一个颜色
                var a=this.subCheck[j].cardStyle.split('lan');
                this.subCheck[j].cardStyle=a;
              }
              var acc=this.subCheck[iidx-this.subRadio.length].cardStyle;//当前位置的蓝色
              this.subCheck[iidx-this.subRadio.length].cardStyle=acc+' lan'
              //重新赋值
              this.content=this.subCheck[iidx-this.subRadio.length].content;//渲染题目
              this.title=this.title-1;//渲染题号
//              var strArr = this.subCheck[iidx-this.subRadio.length].option.split("&&");
//              console.log(strArr);
              this.items=[];
              if(this.subCheck[iidx-this.subRadio.length].optionA==''||this.subCheck[iidx-this.subRadio.length].optionA==null){}else{this.items.push({one:this.subCheck[iidx-this.subRadio.length].optionA, state:0})}
              if(this.subCheck[iidx-this.subRadio.length].optionB==''||this.subCheck[iidx-this.subRadio.length].optionB==null){}else{this.items.push({one:this.subCheck[iidx-this.subRadio.length].optionB, state:0})}
              if(this.subCheck[iidx-this.subRadio.length].optionC==''||this.subCheck[iidx-this.subRadio.length].optionC==null){}else{this.items.push({one:this.subCheck[iidx-this.subRadio.length].optionC, state:0})}
              if(this.subCheck[iidx-this.subRadio.length].optionD==''||this.subCheck[iidx-this.subRadio.length].optionD==null){}else{this.items.push({one:this.subCheck[iidx-this.subRadio.length].optionD, state:0})}
              if(this.subCheck[iidx-this.subRadio.length].optionE==''||this.subCheck[iidx-this.subRadio.length].optionE==null){}else{this.items.push({one:this.subCheck[iidx-this.subRadio.length].optionE, state:0})}
              //查看是否标记了
              if(this.subCheck[iidx-this.subRadio.length].stBiao==true){
//                console.log("true")
//                console.log(this.subCheck[iidx-this.subRadio.length])
                this.signBtn='取消标记';
                this.hoverBiao=false
              }else {
//                console.log("false")
                this.signBtn='标记';
                this.hoverBiao=true
              }
//              for (var i=0;i<strArr.length;i++) {
//                this.items.push({
//                  one: strArr[i],
//                  state: 0
//                })
//              }
              //答题卡信息回显----预防出问题(多选)
              var arr=''+this.subCheck[iidx-this.subRadio.length].answer
              var strs = arr.split(""); //字符分割
//              console.log(strs);
              for(var n=0;n<strs.length;n++){
                var nn=strs[n]
                this.items[nn].state=1;
              }
            }
          }else{//判断
            var iidx=this.title-2;
            if (iidx<(this.subRadio.length+this.subCheck.length)){
//              console.log("去多选的"+(this.subCheck.length-1))
              this.Diagnosis=2;//选题赋值
              if (this.subJudge[0].cardStyle.indexOf("lan") != -1 ){//删除上一个颜色
                var a=this.subJudge[0].cardStyle.split('lan');
                this.subJudge[0].cardStyle=a;
              }
              var acc=this.subCheck[this.subCheck.length-1].cardStyle;//当前位置的蓝色
              this.subCheck[this.subCheck.length-1].cardStyle=acc+' lan'
              //重新赋值
              this.content=this.subCheck[this.subCheck.length-1].content;//渲染题目
              this.title=this.title-1;//渲染题号
//              var strArr = this.subCheck[this.subCheck.length-1].option.split("&&");
//              console.log(strArr);
              this.items=[];
              if(this.subCheck[this.subCheck.length-1].optionA==''||this.subCheck[this.subCheck.length-1].optionA==null){}else{this.items.push({one:this.subCheck[this.subCheck.length-1].optionA, state:0})}
              if(this.subCheck[this.subCheck.length-1].optionB==''||this.subCheck[this.subCheck.length-1].optionB==null){}else{this.items.push({one:this.subCheck[this.subCheck.length-1].optionB, state:0})}
              if(this.subCheck[this.subCheck.length-1].optionC==''||this.subCheck[this.subCheck.length-1].optionC==null){}else{this.items.push({one:this.subCheck[this.subCheck.length-1].optionC, state:0})}
              if(this.subCheck[this.subCheck.length-1].optionD==''||this.subCheck[this.subCheck.length-1].optionD==null){}else{this.items.push({one:this.subCheck[this.subCheck.length-1].optionD, state:0})}
              if(this.subCheck[this.subCheck.length-1].optionE==''||this.subCheck[this.subCheck.length-1].optionE==null){}else{this.items.push({one:this.subCheck[this.subCheck.length-1].optionE, state:0})}
              //查看是否标记了
              if(this.subCheck[this.subCheck.length-1].stBiao==true){
//                console.log("true")
                this.signBtn='取消标记';
                this.hoverBiao=false
              }else {
//                console.log("false")
                this.signBtn='标记';
                this.hoverBiao=true
              }
//              for (var i=0;i<strArr.length;i++) {
//                this.items.push({
//                  one: strArr[i],
//                  state: 0
//                })
//              }
              //答题卡信息回显----预防出问题(判断去多选)
              var arr=''+this.subCheck[this.subCheck.length-1].answer
              var strs = arr.split(""); //字符分割
//              console.log(strs);
              for(var n=0;n<strs.length;n++){
                var nn=strs[n]
                this.items[nn].state=1;
              }
            }else{ //渲染
//              console.log("去判断的第"+(iidx-(this.subRadio.length+this.subCheck.length)))
              var j=(this.title-1)-this.subRadio.length-this.subCheck.length;
              if (this.subJudge[j].cardStyle.indexOf("lan") != -1 ){//删除上一个颜色
                var a=this.subJudge[j].cardStyle.split('lan');
              this.subJudge[j].cardStyle=a;
            }
              var acc=this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].cardStyle;//当前位置的蓝色
              this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].cardStyle=acc+' lan'
              //重新赋值
              this.content=this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].content;//渲染题目
              this.title=this.title-1;//渲染题号
//              var strArr = this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].option.split("&&");
//              console.log(strArr);
              this.items=[];
              if(this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].optionA==''||this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].optionA==null){}else{this.items.push({one:this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].optionA, state:0})}
              if(this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].optionB==''||this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].optionB==null){}else{this.items.push({one:this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].optionB, state:0})}
              if(this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].optionC==''||this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].optionC==null){}else{this.items.push({one:this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].optionC, state:0})}
              if(this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].optionD==''||this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].optionD==null){}else{this.items.push({one:this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].optionD, state:0})}
              if(this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].optionE==''||this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].optionE==null){}else{this.items.push({one:this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].optionE, state:0})}
              //查看是否标记了
              if(this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].stBiao==true){
//                console.log("true")
                this.signBtn='取消标记';
                this.hoverBiao=false
              }else {
//                console.log("false")
                this.signBtn='标记';
                this.hoverBiao=true
              }
//              for (var i=0;i<strArr.length;i++) {
//                this.items.push({
//                  one: strArr[i],
//                  state: 0
//                })
//              }
              //答题卡信息回显----预防出问题(判断)
              var arr=''+this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].answer
              var strs = arr.split(""); //字符分割
//              console.log(strs);
              for(var n=0;n<strs.length;n++){
                var nn=strs[n]
                this.items[nn].state=1;
              }
            }
          }
          },
        enderingr:function(iidx){
          // /封装的渲染函数
          //点击答题卡取消上一个div蓝色
          if((this.title-1)<this.subRadio.length){//单选
            if (this.subRadio[this.title-1].cardStyle.indexOf("lan") != -1 ){
              var a=this.subRadio[this.title-1].cardStyle.split('lan');
              this.subRadio[this.title-1].cardStyle=a;
            }
            this.content=this.subRadio[iidx].content;//渲染题目
            this.title=this.title+1;//渲染题号
            this.items=[];
            if(this.subRadio[iidx].optionA==''||this.subRadio[iidx].optionA==null){}else{this.items.push({one:this.subRadio[iidx].optionA, state:0})}
            if(this.subRadio[iidx].optionB==''||this.subRadio[iidx].optionB==null){}else{this.items.push({one:this.subRadio[iidx].optionB, state:0})}
            if(this.subRadio[iidx].optionC==''||this.subRadio[iidx].optionC==null){}else{this.items.push({one:this.subRadio[iidx].optionC, state:0})}
            if(this.subRadio[iidx].optionD==''||this.subRadio[iidx].optionD==null){}else{this.items.push({one:this.subRadio[iidx].optionD, state:0})}
            if(this.subRadio[iidx].optionE==''||this.subRadio[iidx].optionE==null){}else{this.items.push({one:this.subRadio[iidx].optionE, state:0})}
            //查看是否标记了
            if(this.subRadio[iidx].stBiao==true){
//              console.log("true")
              this.signBtn='取消标记';
              this.hoverBiao=false
            }else {
//              console.log("false")
              this.signBtn='标记';
              this.hoverBiao=true
            }
//            var strArr = this.subRadio[iidx].option.split("&&");
//            console.log(strArr);
//            for (var i=0;i<strArr.length;i++) {
//              this.items.push({
//                one: strArr[i],
//                state: 0
//              })
//            }

          }else if((this.title-1)<(this.subRadio.length+this.subCheck.length)){//多选
            var j=(this.title-1)-this.subRadio.length;
            if (this.subCheck[j].cardStyle.indexOf("lan") != -1 ){
              var a=this.subCheck[j].cardStyle.split('lan');
              this.subCheck[j].cardStyle=a;
            }
            this.content=this.subCheck[iidx].content;//渲染题目
            this.title=this.title+1;//渲染题号
//            var strArr = this.subCheck[iidx].option.split("&&");
//            console.log(strArr);
            this.items=[];
            if(this.subCheck[iidx].optionA==''||this.subCheck[iidx].optionA==null){}else{this.items.push({one:this.subCheck[iidx].optionA, state:0})}
            if(this.subCheck[iidx].optionB==''||this.subCheck[iidx].optionB==null){}else{this.items.push({one:this.subCheck[iidx].optionB, state:0})}
            if(this.subCheck[iidx].optionC==''||this.subCheck[iidx].optionC==null){}else{this.items.push({one:this.subCheck[iidx].optionC, state:0})}
            if(this.subCheck[iidx].optionD==''||this.subCheck[iidx].optionD==null){}else{this.items.push({one:this.subCheck[iidx].optionD, state:0})}
            if(this.subCheck[iidx].optionE==''||this.subCheck[iidx].optionE==null){}else{this.items.push({one:this.subCheck[iidx].optionE, state:0})}
            //查看是否标记了
            if(this.subCheck[iidx].stBiao==true){
//              console.log("true")
              this.signBtn='取消标记';
              this.hoverBiao=false
            }else {
//              console.log("false")
              this.signBtn='标记';
              this.hoverBiao=true
            }
//            for (var i=0;i<strArr.length;i++) {
//              this.items.push({
//                one: strArr[i],
//                state: 0
//              })
//            }
          }else {//判断
            var j=(this.title-1)-(this.subRadio.length+this.subCheck.length);
            if (this.subJudge[j].cardStyle.indexOf("lan") != -1 ){
              var a=this.subJudge[j].cardStyle.split('lan');
              this.subJudge[j].cardStyle=a;
            }
            this.content=this.subJudge[iidx].content;//渲染题目
            this.title=this.title+1;//渲染题号
//            var strArr = this.subJudge[iidx].option.split("&&");
//            console.log(strArr);
            this.items=[];
            if(this.subJudge[iidx].optionA==''||this.subJudge[iidx].optionA==null){}else{this.items.push({one:this.subJudge[iidx].optionA, state:0})}
            if(this.subJudge[iidx].optionB==''||this.subJudge[iidx].optionB==null){}else{this.items.push({one:this.subJudge[iidx].optionB, state:0})}
            if(this.subJudge[iidx].optionC==''||this.subJudge[iidx].optionC==null){}else{this.items.push({one:this.subJudge[iidx].optionC, state:0})}
            if(this.subJudge[iidx].optionD==''||this.subJudge[iidx].optionD==null){}else{this.items.push({one:this.subJudge[iidx].optionD, state:0})}
            if(this.subJudge[iidx].optionE==''||this.subJudge[iidx].optionE==null){}else{this.items.push({one:this.subJudge[iidx].optionE, state:0})}
            //查看是否标记了
            if(this.subJudge[iidx].stBiao==true){
//              console.log("true")
              this.signBtn='取消标记';
              this.hoverBiao=false
            }else {
//              console.log("false")
              this.signBtn='标记';
              this.hoverBiao=true
            }
//            for (var i=0;i<strArr.length;i++) {
//              this.items.push({
//                one: strArr[i],
//                state: 0
//              })
//            }
          }

        },
        down:function () {//下一题
          this.switchNum1(); //实时监听已达多少题
//          console.log(this.title)
//          console.log(this.subRadio.length)
          if((this.title-1)<this.subRadio.length){//单选
            var iidx=this.title;
            if (iidx>(this.subRadio.length-1)){ //已经是单选的最后一个了
              console.log("去多选的0");
              this.Diagnosis=2;//选题赋值
              this.content=this.subCheck[0].content;//渲染题目
              this.title=this.title+1;//渲染题号
//              var strArr = this.subCheck[0].option.split("&&");
//              console.log(strArr);
              this.items=[];
              if(this.subCheck[0].optionA==''||this.subCheck[0].optionA==null){}else{this.items.push({one:this.subCheck[0].optionA, state:0})}
              if(this.subCheck[0].optionB==''||this.subCheck[0].optionB==null){}else{this.items.push({one:this.subCheck[0].optionB, state:0})}
              if(this.subCheck[0].optionC==''||this.subCheck[0].optionC==null){}else{this.items.push({one:this.subCheck[0].optionC, state:0})}
              if(this.subCheck[0].optionD==''||this.subCheck[0].optionD==null){}else{this.items.push({one:this.subCheck[0].optionD, state:0})}
              if(this.subCheck[0].optionE==''||this.subCheck[0].optionE==null){}else{this.items.push({one:this.subCheck[0].optionE, state:0})}
              //查看是否标记了
              if(this.subCheck[0].stBiao==true){
//                console.log("true")
                this.signBtn='取消标记';
                this.hoverBiao=false
              }else {
//                console.log("false")
                this.signBtn='标记';
                this.hoverBiao=true
              }
//              for (var i=0;i<strArr.length;i++) {
//                this.items.push({
//                  one: strArr[i],
//                  state: 0
//                })
//              }
              //答题卡信息回显----预防出问题(单选转多选)
              var arr=''+this.subCheck[0].answer
              var strs = arr.split(""); //字符分割
//              console.log(strs);
              for(var n=0;n<strs.length;n++){
                var nn=strs[n]
                this.items[nn].state=1;
              }
              var i=(this.subRadio.length-1); //清楚单选最后一个样式
              if (this.subRadio[i].cardStyle.indexOf("lan") != -1 ) {
                var a = this.subRadio[i].cardStyle.split('lan');
                this.subRadio[i].cardStyle = a;
              }
              var acc=this.subCheck[0].cardStyle;//当前位置的蓝色
              this.subCheck[0].cardStyle=acc+' lan'
            }else{ //渲染
              console.log("去单选的第"+iidx);
              this.enderingr(iidx);
              var acc=this.subRadio[iidx].cardStyle;//当前位置的蓝色
              this.subRadio[iidx].cardStyle=acc+' lan'
              //答题卡信息回显----预防出问题(单选)
              var arr=''+this.subRadio[iidx].answer
              var strs = arr.split(""); //字符分割
//              console.log(strs);
              for(var n=0;n<strs.length;n++){
                var nn=strs[n]
                this.items[nn].state=1;
              }
            }
          }else if((this.title-1)<(this.subRadio.length+this.subCheck.length)){//多选
            var iidx=this.title;
            if (iidx>((this.subRadio.length+this.subCheck.length)-1)){
//              console.log("去判断选的0")
              this.Diagnosis=3;//选题赋值
              this.content=this.subJudge[0].content;//渲染题目
              this.title=this.title+1;//渲染题号
//              var strArr = this.subJudge[0].option.split("&&");
//              console.log(strArr);
              this.items=[];
              if(this.subJudge[0].optionA==''||this.subJudge[0].optionA==null){}else{this.items.push({one:this.subJudge[0].optionA, state:0})}
              if(this.subJudge[0].optionB==''||this.subJudge[0].optionB==null){}else{this.items.push({one:this.subJudge[0].optionB, state:0})}
              if(this.subJudge[0].optionC==''||this.subJudge[0].optionC==null){}else{this.items.push({one:this.subJudge[0].optionC, state:0})}
              if(this.subJudge[0].optionD==''||this.subJudge[0].optionD==null){}else{this.items.push({one:this.subJudge[0].optionD, state:0})}
              if(this.subJudge[0].optionE==''||this.subJudge[0].optionE==null){}else{this.items.push({one:this.subJudge[0].optionE, state:0})}
              //查看是否标记了
              if(this.subJudge[0].stBiao==true){
//                console.log("true")
                this.signBtn='取消标记';
                this.hoverBiao=false
              }else {
//                console.log("false")
                this.signBtn='标记';
                this.hoverBiao=true
              }
//              for (var i=0;i<strArr.length;i++) {
//                this.items.push({
//                  one: strArr[i],
//                  state: 0
//                })
//              }
              //答题卡信息回显----预防出问题(多选转判断)
              var arr=''+this.subJudge[0].answer
              var strs = arr.split(""); //字符分割
//              console.log(strs);
              for(var n=0;n<strs.length;n++){
                var nn=strs[n]
                this.items[nn].state=1;
              }
              var i=this.title-1-this.subRadio.length-1; //清楚多选最后一个样式
//              console.log(i)
              if (this.subCheck[i].cardStyle.indexOf("lan") != -1 ) {
                var a = this.subCheck[i].cardStyle.split('lan');
                this.subCheck[i].cardStyle = a;
              }
              var acc=this.subJudge[0].cardStyle;//当前位置的蓝色
              this.subJudge[0].cardStyle=acc+' lan'
            }else{ //渲染
              this.enderingr(iidx-this.subRadio.length);
//              console.log("去多选的第"+(iidx-this.subRadio.length));
              var acc=this.subCheck[iidx-this.subRadio.length].cardStyle;//当前位置的蓝色
              this.subCheck[iidx-this.subRadio.length].cardStyle=acc+' lan'
            //  答题卡信息回显----预防出问题(多选)
              var arr=''+this.subCheck[iidx-this.subRadio.length].answer
              var strs = arr.split(""); //字符分割
//              console.log(strs);
              for(var n=0;n<strs.length;n++){
                var nn=strs[n]
                this.items[nn].state=1;
              }
            }
          }else{//判断
            var iidx=this.title;
            if (iidx>((this.subRadio.length+this.subCheck.length+this.subJudge.length)-1)){
              this.$Message.warning('已经是最后一个了');
            }else{ //渲染
//              console.log("去判断的第"+(iidx-(this.subRadio.length+this.subCheck.length)));
              this.enderingr(iidx-(this.subRadio.length+this.subCheck.length));
              var acc=this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].cardStyle;//当前位置的蓝色
              this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].cardStyle=acc+' lan'
          //    答题卡信息回显----预防出问题(多选)
              var arr=''+this.subJudge[iidx-(this.subRadio.length+this.subCheck.length)].answer
              var strs = arr.split(""); //字符分割
//              console.log(strs);
              for(var n=0;n<strs.length;n++){
                var nn=strs[n]
                this.items[nn].state=1;
              }
            }
          }
        },
        cardClick:function(type,index,title){//答题卡点击

          this.switchNum1(); //实时监听已达多少题
//          console.log(type);//总的类型
//          console.log(index);//
//          console.log(title);
//          console.log(this.title)
          //点击答题卡取消上一个div蓝色
        if((this.title-1)<this.subRadio.length){//单选
          if (this.subRadio[this.title-1].cardStyle.indexOf("lan") != -1 ){
//            console.log("删除")
              var a=this.subRadio[this.title-1].cardStyle.split('lan');
              this.subRadio[this.title-1].cardStyle=a;
            }
        }else if((this.title-1)<(this.subRadio.length+this.subCheck.length)){//多选
          var j=(this.title-1)-this.subRadio.length;
          if (this.subCheck[j].cardStyle.indexOf("lan") != -1 ){
              var a=this.subCheck[j].cardStyle.split('lan');
              this.subCheck[j].cardStyle=a;
            }
        }else {//判断
          var j=(this.title-1)-(this.subRadio.length+this.subCheck.length);
          if (this.subJudge[j].cardStyle.indexOf("lan") != -1 ){
              var a=this.subJudge[j].cardStyle.split('lan');
              this.subJudge[j].cardStyle=a;
            }
        }

          this.content=type.content;//题目
          this.title=title;
//          var strArr = type.option.split("&&");
//          console.log(strArr);
          this.items=[];
          if(type.optionA==''||type.optionA==null){}else{this.items.push({one:type.optionA, state:0})}
          if(type.optionB==''||type.optionB==null){}else{this.items.push({one:type.optionB, state:0})}
          if(type.optionC==''||type.optionC==null){}else{this.items.push({one:type.optionC, state:0})}
          if(type.optionD==''||type.optionD==null){}else{this.items.push({one:type.optionD, state:0})}
          if(type.optionE==''||type.optionE==null){}else{this.items.push({one:type.optionE, state:0})}
          if(type.stBiao==true){
//            console.log("true")
            this.signBtn='取消标记';
            this.hoverBiao=false
          }else {
//            console.log("false")
            this.signBtn='标记';
            this.hoverBiao=true
          }
//          for (var i=0;i<strArr.length;i++){
//            this.items.push({
//              one:strArr[i],
//              state:0
//          })
//          }
          //点击答题卡新的div加蓝色
          if(type.type==1){
            var acc=this.subRadio[index].cardStyle;
            this.subRadio[index].cardStyle=acc+' lan'
            //答题卡信息回显
            var arr=''+this.subRadio[index].answer
            var strs = arr.split(""); //字符分割
//            console.log(strs);
            for(var n=0;n<strs.length;n++){
              var nn=strs[n]
              this.items[nn].state=1;
            }
          }else if(type.type==2){
//            console.log(this.subCheck[index]);//信息回显
            var acc=this.subCheck[index].cardStyle;
            this.subCheck[index].cardStyle=acc+' lan'
            //答题卡信息回显
            var arr=''+this.subCheck[index].answer
            var strs = arr.split(""); //字符分割
//            console.log(strs);
            for(var n=0;n<strs.length;n++){
              var nn=strs[n]
              this.items[nn].state=1;
            }
          }else{
            var acc=this.subJudge[index].cardStyle;
            this.subJudge[index].cardStyle=acc+' lan';
            //答题卡信息回显
            var arr=''+this.subJudge[index].answer
            var strs = arr.split(""); //字符分割
//            console.log(strs);
            for(var n=0;n<strs.length;n++){
              var nn=strs[n]
              this.items[nn].state=1;
            }
          }
         this.Diagnosis=type.type;//渲染数据的题型
        },
        toLoading() {
          this.modal1=true;
          this.loading = true;
        },
        choice:function(obj){ //选择
          if(this.Diagnosis==2){ //多选题
            var idx=(this.title-1)-(this.subRadio.length);
            var style=this.subCheck[idx].cardStyle;
            this.subCheck[idx].cardStyle=style+' yes';
//            console.log(this.items);
//            console.log(this.subCheck)
            if(this.items[obj].state==1){
              this.items[obj].state=0
            }else{
              this.items[obj].state=1
            }
            var arr=[];
            for(var m=0;m<this.items.length;m++){
              if(this.items[m].state==1){//选择的
                arr.push(m)
              }
            }
            if(arr.length==0){  //无数据
//              console.log("无数据")
              var a=this.subCheck[idx].cardStyle.split('yes');
              var c = a.join('');
//              console.log(c)
              this.subCheck[idx].cardStyle=c;
            }else{
//              console.log("you数据")
            }
            this.subCheck[idx].answer=arr.join('');//存储用户选择的答案
          }else{//单选题
            if(this.Diagnosis==1){//单选题存储
              var style=this.subRadio[this.title-1].cardStyle;
              this.subRadio[this.title-1].cardStyle=style+' yes';
              this.subRadio[this.title-1].answer=obj;//存储用户选择的答案
              console.log("这是存储单选题"+this.subRadio);
              console.log(this.subRadio);
            }else if (this.Diagnosis==3){//判断题存储
              var idx=(this.title-1)-(this.subCheck.length+this.subRadio.length);
              var style=this.subJudge[idx].cardStyle;
              this.subJudge[idx].cardStyle=style+' yes';
              this.subJudge[idx].answer=obj;//存储用户选择的答案
//              console.log(idx)
            }
            //调节样式
            for(var z=0;z<this.items.length;z++){
              if (z==obj){
                this.items[obj].state=1
              }else {
                this.items[z].state=0
              }
            }
          }
        },
        sign:function(){
          if(this.hoverBiao==true){
            //标记
            if(this.Diagnosis==1){ //单选题
              var style=this.subRadio[this.title-1].cardStyle
              this.subRadio[this.title-1].cardStyle=style+' biao';
              this.subRadio[this.title-1].stBiao=true
            }else if(this.Diagnosis==2){//多选
              var idx=(this.title-1)-(this.subRadio.length);
              var style=this.subCheck[idx].cardStyle;
              this.subCheck[idx].cardStyle=style+' biao';
              this.subCheck[idx].stBiao=true
            }else {//判断
              var idx=(this.title-1)-(this.subRadio.length+this.subCheck.length);
              var style=this.subJudge[idx].cardStyle;
              this.subJudge[idx].cardStyle=style+' biao';
              this.subJudge[idx].stBiao=true
            }
            this.signBtn='取消标记';
            this.hoverBiao=false;
          }
          else {
            //取消标记问题
            if(this.Diagnosis==1){ //单选题
//              console.log(this.subRadio[this.title-1].cardStyle)
              var a=this.subRadio[this.title-1].cardStyle.split('biao');c
              var c = a.join('');
              this.subRadio[this.title-1].cardStyle=c;
              this.subRadio[this.title-1].stBiao=false
            }
            else if(this.Diagnosis==2){//多选
              var idx=(this.title-1)-(this.subRadio.length);
              var style=this.subCheck[idx].cardStyle;
              var a=this.subCheck[idx].cardStyle.split('biao');
              var c = a.join('');
              this.subCheck[idx].cardStyle=c;
              this.subCheck[idx].stBiao=false
            }else {//判断
              var idx=(this.title-1)-(this.subRadio.length+this.subCheck.length);
              var style=this.subJudge[idx].cardStyle;
              var a=this.subJudge[idx].cardStyle.split('biao');
              var c = a.join('');
              this.subJudge[idx].cardStyle=c;
              this.subJudge[idx].stBiao=false
            }
            this.signBtn='标记';
            this.hoverBiao=true;
          }


        },
        topic:function () {
          //获取试题
          var examId= this.$route.query.examId;
          this.$axios({
            url: '/web/subject/exam/extractQuestion/'+examId,
            method: 'GET',
            data:{},
            headers: {
              'Content-Type': 'application/json;charset=UTF-8'
            },
            transformRequest: [function(data) {  //json
              data = JSON.stringify(data);
              return data
            }],
          }).then((response) => {
            console.log("ajax返回的数据："+ response.data);
//            渲染要求
            this.dan=response.data.examSetting.singleChoiceCount;//单选题数量
            this.duo=response.data.examSetting.multipleChoiceCount;//多选题数量
            this.pan=response.data.examSetting.judgeCount;//多选题数量
            this.danfen=response.data.examSetting.singleChoiceScore;//单选题分数
            this.duofen=response.data.examSetting.multipleChoiceScore;//多选题分数
            this.panfen=response.data.examSetting.judgeScore;//判断题分数
            this.topicNum=response.data.examSetting.singleChoiceCount+response.data.examSetting.multipleChoiceCount+response.data.examSetting.judgeCount;//总共多少道题
            this.branch=response.data.examSetting.singleChoiceScore+response.data.examSetting.multipleChoiceScore+response.data.examSetting.judgeScore;//总共多少分
            this.qualified=response.data.examSetting.qualifiedGrade;//合格分数
            this.examTime= parseInt(response.data.examSetting.examTime / 60)+'分';//+parseInt(response.data.examSetting.examTime % 60)+'秒';//考试时间
            this.countDown=response.data.examSetting.examTime;
            this.chuTime=response.data.examSetting.examTime;
            this.templateId=response.data.templateId
            this.countTime();
//            渲染答题卡
            for(var i=0;i<response.data.questions.length;i++){
                  if(response.data.questions[i].type=='1'){
                    if(response.data.questions[i].optionC==''||response.data.questions[i].optionC==null){
                      this.subRadio.push({
                        id:response.data.questions[i].id,//题目id
                        content:response.data.questions[i].content,//题目内容
                        optionA:"A  "+response.data.questions[i].optionA,//题目选项A
                        optionB:"B  "+response.data.questions[i].optionB,//题目选项B
                        type:response.data.questions[i].type,//题目类型
                        cardStyle:'not',//答题卡样式   yes biao lan
                        answer:'',//用户答案
                        stBiao:false,
                      });
                    }else if(response.data.questions[i].optionD==''||response.data.questions[i].optionD==null){
                      this.subRadio.push({
                        id:response.data.questions[i].id,//题目id
                        content:response.data.questions[i].content,//题目内容
                        optionA:"A  "+response.data.questions[i].optionA,//题目选项A
                        optionB:"B  "+response.data.questions[i].optionB,//题目选项B
                        optionC:"C  "+response.data.questions[i].optionC,//题目选项C
                        type:response.data.questions[i].type,//题目类型
                        cardStyle:'not',//答题卡样式   yes biao lan
                        answer:'',//用户答案
                        stBiao:false,
                      });
                    }else if(response.data.questions[i].optionE==''||response.data.questions[i].optionE==null){
                      this.subRadio.push({
                        id:response.data.questions[i].id,//题目id
                        content:response.data.questions[i].content,//题目内容
                        optionA:"A  "+response.data.questions[i].optionA,//题目选项A
                        optionB:"B  "+response.data.questions[i].optionB,//题目选项B
                        optionC:"C  "+response.data.questions[i].optionC,//题目选项C
                        optionD:"D  "+response.data.questions[i].optionD,//题目选项D
                        type:response.data.questions[i].type,//题目类型
                        cardStyle:'not',//答题卡样式   yes biao lan
                        answer:'',//用户答案
                        stBiao:false,
                      });
                    }else {
                      this.subRadio.push({
                        id:response.data.questions[i].id,//题目id
                        content:response.data.questions[i].content,//题目内容
                        optionA:"A  "+response.data.questions[i].optionA,//题目选项A
                        optionB:"B  "+response.data.questions[i].optionB,//题目选项B
                        optionC:"C  "+response.data.questions[i].optionC,//题目选项C
                        optionD:"D  "+response.data.questions[i].optionD,//题目选项D
                        optionE:"E  "+response.data.questions[i].optionE,//题目选项E
                        type:response.data.questions[i].type,//题目类型
                        cardStyle:'not',//答题卡样式   yes biao lan
                        answer:'',//用户答案
                        stBiao:false,
                      });
                    }
                  }else if (response.data.questions[i].type=='2'){
                    if(response.data.questions[i].optionC==''||response.data.questions[i].optionC==null){
                      this.subCheck.push({
                        id:response.data.questions[i].id,//题目id
                        content:response.data.questions[i].content,//题目内容
                        optionA:"A  "+response.data.questions[i].optionA,//题目选项A
                        optionB:"B  "+response.data.questions[i].optionB,//题目选项B
                        type:response.data.questions[i].type,//题目类型
                        cardStyle:'not',//答题卡样式
                        answer:'',//用户答案
                        stBiao:false,
                      });
                    }else if(response.data.questions[i].optionD==''||response.data.questions[i].optionD==null){
                      this.subCheck.push({
                        id:response.data.questions[i].id,//题目id
                        content:response.data.questions[i].content,//题目内容
                        optionA:"A  "+response.data.questions[i].optionA,//题目选项A
                        optionB:"B  "+response.data.questions[i].optionB,//题目选项B
                        optionC:"C  "+response.data.questions[i].optionC,//题目选项C
                        type:response.data.questions[i].type,//题目类型
                        cardStyle:'not',//答题卡样式
                        answer:'',//用户答案
                        stBiao:false,
                      });
                    }else if(response.data.questions[i].optionE==''||response.data.questions[i].optionE==null){
                      this.subCheck.push({
                        id:response.data.questions[i].id,//题目id
                        content:response.data.questions[i].content,//题目内容
                        optionA:"A  "+response.data.questions[i].optionA,//题目选项A
                        optionB:"B  "+response.data.questions[i].optionB,//题目选项B
                        optionC:"C  "+response.data.questions[i].optionC,//题目选项C
                        optionD:"D  "+response.data.questions[i].optionD,//题目选项D
                        type:response.data.questions[i].type,//题目类型
                        cardStyle:'not',//答题卡样式
                        answer:'',//用户答案
                        stBiao:false,
                      });
                    }else{
                      this.subCheck.push({
                        id:response.data.questions[i].id,//题目id
                        content:response.data.questions[i].content,//题目内容
                        optionA:"A  "+response.data.questions[i].optionA,//题目选项A
                        optionB:"B  "+response.data.questions[i].optionB,//题目选项B
                        optionC:"C  "+response.data.questions[i].optionC,//题目选项C
                        optionD:"D  "+response.data.questions[i].optionD,//题目选项D
                        optionE:"E  "+response.data.questions[i].optionE,//题目选项E
                        type:response.data.questions[i].type,//题目类型
                        cardStyle:'not',//答题卡样式
                        answer:'',//用户答案
                        stBiao:false,
                      });
                    }

                  }else if(response.data.questions[i].type=='3'){
                    if(response.data.questions[i].optionC==''||response.data.questions[i].optionC==null){
                      this.subJudge.push({
                        id:response.data.questions[i].id,//题目id
                        content:response.data.questions[i].content,//题目内容
                        optionA:"A  "+response.data.questions[i].optionA,//题目选项A
                        optionB:"B  "+response.data.questions[i].optionB,//题目选项B
                        type:response.data.questions[i].type,//题目类型
                        cardStyle:'not',//答题卡样式
                        answer:'',//用户答案
                        stBiao:false,
                      });
                    }else if(response.data.questions[i].optionD==''||response.data.questions[i].optionD==null){
                      this.subJudge.push({
                        id:response.data.questions[i].id,//题目id
                        content:response.data.questions[i].content,//题目内容
                        optionA:"A  "+response.data.questions[i].optionA,//题目选项A
                        optionB:"B  "+response.data.questions[i].optionB,//题目选项B
                        optionC:"C  "+response.data.questions[i].optionC,//题目选项C
                        type:response.data.questions[i].type,//题目类型
                        cardStyle:'not',//答题卡样式
                        answer:'',//用户答案
                        stBiao:false,
                      });
                    }else if(response.data.questions[i].optionE==''||response.data.questions[i].optionE==null){
                      this.subJudge.push({
                        id:response.data.questions[i].id,//题目id
                        content:response.data.questions[i].content,//题目内容
                        optionA:"A  "+response.data.questions[i].optionA,//题目选项A
                        optionB:"B  "+response.data.questions[i].optionB,//题目选项B
                        optionC:"C  "+response.data.questions[i].optionC,//题目选项C
                        optionD:"D  "+response.data.questions[i].optionD,//题目选项D
                        type:response.data.questions[i].type,//题目类型
                        cardStyle:'not',//答题卡样式
                        answer:'',//用户答案
                        stBiao:false,
                      });
                    }else{
                      this.subJudge.push({
                        id:response.data.questions[i].id,//题目id
                        content:response.data.questions[i].content,//题目内容
                        optionA:"A  "+response.data.questions[i].optionA,//题目选项A
                        optionB:"B  "+response.data.questions[i].optionB,//题目选项B
                        optionC:"C  "+response.data.questions[i].optionC,//题目选项C
                        optionD:"D  "+response.data.questions[i].optionD,//题目选项D
                        optionE:"E  "+response.data.questions[i].optionE,//题目选项D
                        type:response.data.questions[i].type,//题目类型
                        cardStyle:'not',//答题卡样式
                        answer:'',//用户答案
                        stBiao:false,
                      });
                    }



                  }else{
                    this.$Message.error('答题卡渲染失败！')
                  }
            }
            //一开始渲染题
            if(this.subRadio.length!=0){   //单选题是否有数据
              this.content=this.subRadio[0].content;//题目
//              var strArr = this.subRadio[0].option.split("&&");
              this.subRadio[0].cardStyle='not lan';
              this.items=[];
//             选项分开，
              if(this.subRadio[0].optionA==''||this.subRadio[0].optionA==null){}else{this.items.push({one:this.subRadio[0].optionA, state:0})}
              if(this.subRadio[0].optionB==''||this.subRadio[0].optionB==null){}else{this.items.push({one:this.subRadio[0].optionB, state:0})}
              if(this.subRadio[0].optionC==''||this.subRadio[0].optionC==null){}else{this.items.push({one:this.subRadio[0].optionC, state:0})}
              if(this.subRadio[0].optionD==''||this.subRadio[0].optionD==null){}else{this.items.push({one:this.subRadio[0].optionD, state:0})}
              if(this.subRadio[0].optionE==''||this.subRadio[0].optionE==null){}else{this.items.push({one:this.subRadio[0].optionE, state:0})}

            }else if(this.subCheck.length!=0){ //多选题是否有数据
              this.content=this.subCheck[0].content;
              var strArr = this.subCheck[0].option.split("&&");
              this.items=[];
              if(this.subCheck[0].optionA==''||this.subCheck[0].optionA==null){}else{this.items.push({one:this.subCheck[0].optionA, state:0})}
              if(this.subCheck[0].optionB==''||this.subCheck[0].optionB==null){}else{this.items.push({one:this.subCheck[0].optionB, state:0})}
              if(this.subCheck[0].optionC==''||this.subCheck[0].optionC==null){}else{this.items.push({one:this.subCheck[0].optionC, state:0})}
              if(this.subCheck[0].optionD==''||this.subCheck[0].optionD==null){}else{this.items.push({one:this.subCheck[0].optionD, state:0})}
              if(this.subCheck[0].optionE==''||this.subCheck[0].optionE==null){}else{this.items.push({one:this.subCheck[0].optionE, state:0})}

            }else{//判断题是否有数据
              this.content=this.subJudge[0].content;
              var strArr = this.subJudge[0].option.split("&&");
              this.items=[];
              if(this.subJudge[0].optionA==''||this.subJudge[0].optionA==null){}else{this.items.push({one:this.subJudge[0].optionA, state:0})}
              if(this.subJudge[0].optionB==''||this.subJudge[0].optionB==null){}else{this.items.push({one:this.subJudge[0].optionB, state:0})}
              if(this.subJudge[0].optionC==''||this.subJudge[0].optionC==null){}else{this.items.push({one:this.subJudge[0].optionC, state:0})}
              if(this.subJudge[0].optionD==''||this.subJudge[0].optionD==null){}else{this.items.push({one:this.subJudge[0].optionD, state:0})}
              if(this.subJudge[0].optionE==''||this.subJudge[0].optionE==null){}else{this.items.push({one:this.subJudge[0].optionE, state:0})}

            }
            console.log("这是多选题的题库"+this.subCheck)
          }).catch((error) => {
            console.log("调取失败500");
            this.$Message.error('请求试题失败！')
            this.spinShow=false;
          });
        },
        countTime:function() {
          this.countDown--;
          this.minute = parseInt(this.countDown / 60) + '分' + parseInt(this.countDown % 60) + '秒';
          if(this.countDown<=0){
            //交卷
            this. Submission()
          }else {
            setTimeout(this.countTime, 1000)
          }
        },
        switchNum1:function(){  //实时监听已答多少题
          this.switchNum=0;
          for(var i=0;i<this.subRadio.length;i++){
            console.log(typeof this.subRadio[i].answer)
            if (this.subRadio[i].answer === ""){

            }else{
              this.switchNum++
            }
          }
          for(var i=0;i<this.subCheck.length;i++){
            if (this.subCheck[i].answer===''){
            }else{
              this.switchNum++
            }
          }
          for(var i=0;i<this.subJudge.length;i++){
            if (this.subJudge[i].answer===''){
            }else{
              this.switchNum++
            }
          }
        }
     },
      beforeRouteLeave (to, from , next) {
        console.log(to)
        if (to.path === '/wholeMock/resultExam') {
          next()
        } else {
        const answer = window.confirm('确定要离开当前页面？离开后信息将不会被保存！')
        if (answer) {
          next()
        } else {
          next(false)
        }
      }
      },
      mounted:function() {
//          刷新页面提示
        let _this = this
        window.onbeforeunload = function (e) {
          var url = _this.$route.path;
          if(url =="/wholeMock/mockExam"){
            e = e || window.event;
            // 兼容IE8和Firefox 4之前的版本
            if (e) {
              e.returnValue = '退出后所填信息会清空，是否退出？';
            }
            // Chrome, Safari, Firefox 4+, Opera 12+ , IE 9+
            return '关闭提示';
          }else{
            window.onbeforeunload =null
          }
        };
          //获取试题
        this.topic();
        //存储开始时间
        var a=this.$moment().format()
        a= a.substring(0,a.length-6);
        this.moment=a
      },

    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  ul li{
    list-style: none;
    line-height:40px;
    cursor: pointer;
    font-size: 16px;

  }
.content{
  /*padding-top: 138px;*/
}
  .banner{
    background: white;
    margin-top: 14px;
    height: 60px;
    width: 100%;
    z-index: 1;
    box-shadow:0px 0px 11px 0px rgba(4,0,0,0.1);
  }
  .answer{
    width: 1082px;
    margin: auto;
    margin-top: 26px;
  }
  .banner_center{
    width: 1082px;
    margin: auto;
    line-height: 60px;
    color: #3b50a1;
    position: relative;
  }
  .banner_btn{
    position: absolute;
    right: 0;
    top: 15px;
    width: 100px;
    border-radius: 15px;
    font-size: 18px;
    color: white;
    background: #3b50a1;
    border: none;
    line-height:30px;
    padding: 0;
    margin: 0;
  }
  .answer_one{
    width:227px;
    height:124px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 11px 0px rgba(4,0,0,0.1);
    border-radius:1px;
    padding: 18px 0 0 16px;
  }
  .answer_two{
    width:227px;
    height:642px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 5px 0px rgba(4,0,0,0.1);
    border-radius:1px;
    margin-top: 19px;
    margin-bottom: 20px;
    padding: 27px 0 27px 15px;
    overflow-y: auto;
  }
  .answer_three{
    position: relative;
    float: right;
    width:826px;
    height:785px;
    background:rgba(255,255,255,1);
    box-shadow:0px 0px 15px 0px rgba(4,0,0,0.1);
    border-radius:1px;
    padding: 0 18px 0 18px;
  }
  .answer_one_div_k{
    width:34px;
    margin-right: 14px;
    margin-top: 11px;
    font-size: 14px;
    text-align: center;
    display: inline-block;
  }
  .answer_one_div_k div{
    display: inline-block;
    width:37px;
    text-align: center;
    height:35px;
    border-radius:2px;
  }
.answer_one_div_k:nth-of-type(1) div{
   border:1px solid #BDBDBD;
   background: white;
 }
.answer_one_div_k:nth-of-type(2) div{
  border:1px solid #BDBDBD;
  background: #BDBDBD;
}
.answer_one_div_k:nth-of-type(3) div{
  background: #e9e9e9;
  background-image: url('../../assets/images/red.png');
  background-repeat:no-repeat;
  background-size: 17px 17px;
}
.answer_one_div_k:nth-of-type(4) div{
  border:1px solid #3b50a1;
  background: #3b50a1;
}
::-webkit-scrollbar{
  display:none;
}
.answer_two>div{
  margin-top: 10px;
}

 .answer_two>div>div{
   display: inline-block;
   text-align: center;
   line-height: 30px;
   font-size: 16px;
   margin: 0 7px 9px 0;
   cursor: pointer;
   width:30px;
   height:30px;
   border-radius:3px;
 }
/*未做*/
.not{ color: #666666;
  background:rgba(255,255,255,1);
  border:1px solid rgba(189,189,189,1);
}
/*已做*/
.yes{ color: #666666;
  border:1px solid #E9E9E9;
  background: #E9E9E9;
}
/*当前*/
.lan{
    background:rgba(59,80,161,1);
    color: white;
    border: 1px solid rgba(59,80,161,1);
  }
/*标记*/
.biao{
  background-image: url('../../assets/images/red.png');
  background-repeat:no-repeat;
  background-size: 17px 17px;
  border: 1px solid #F94B5C;
}
  /*答题部分*/
.answer_three_header{
  width: 100%;
  height: 70px;
  border-bottom: 1px solid #BDBDBD;
  position: relative;
  font-size:18px;
  line-height: 70px;
  color:rgba(51,51,51,1);
}
  .time{
    width: 200px;
    position: absolute;
    right: 0;
    top: 0;
    color:rgba(59,80,161,1);
  }
  .zi_lan{
    color: #3B50A1;
  }
  .answer_three_tips{
    color: #999999;
    margin: 20px 0 44px 0;
  }
  .subject{
    line-height: 30px;
    font-size: 17px;
    margin-bottom: 10px;
  }
  ul li div{
    width:20px;
    height:20px;
    background:rgba(51,51,51,0);
    border:1px solid rgba(219, 219, 219, 1);
    border-radius:50%;
    display: inline-block;
    margin: 0 14px -3px 0;
  }
  .li_lan{
    background: #3B50A1;
    border: 1px solid #3B50A1;
  }
  .li_red{
    background: #F94B5C;
    border: 1px solid #F94B5C;
  }
  .li_blue{
    background: blue;
    border: 1px solid blue;
  }
  .li_yellow{
    background: yellow;
    border: 1px solid yellow;
  }
  .upDown{
    position: absolute;
    bottom: 58px;
    width: 333px;
    left: 50%;
    margin-left: -117px;
    height: 40px;
  }
  .upDown div{
    width:150px;
    height:40px;
    background:rgba(255,255,255,1);
    border:1px solid rgba(59,80,161,1);
    border-radius:20px;
    display: inline-block;
    text-align: center;
    line-height: 37px;
    color: #3B50A1;
    cursor: pointer;
  }
  .upDown div:hover{
    background:#3B50A1 ;
    color: white;
  }
  .upDown div:nth-of-type(1){
    margin-right: 15px;
  }
  .sign{
    cursor: pointer;
    margin-top: 38px;
    width:95px;
    height:30px;
    line-height: 30px;
    text-align: center;
    color:rgba(249,75,92,1);
    border:1px solid rgba(249, 75, 92, 1);
    border-radius:15px;
  }

  .hoverBiao{
    background:#F94B5C ;
    color: white;
  }
</style>
